<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold tech-gradient mb-2">测试平台</h2>
      <p class="text-gray-600 dark:text-gray-400">管理和配置测试环境平台</p>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
      <div class="p-6 border-b border-gray-200 dark:border-gray-700">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">平台列表</h3>
          <button 
            @click="showCreateModal = true"
            class="px-4 py-2 bg-gradient-to-r from-tech-blue to-tech-purple text-white rounded-lg hover-glow transition-all duration-200"
          >
            <i class="fas fa-plus mr-2"></i>添加平台
          </button>
        </div>
      </div>
      
      <div class="p-6">
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="border-b border-gray-200 dark:border-gray-700">
                <th class="text-left py-3 px-4 text-gray-600 dark:text-gray-400 font-medium">平台名称</th>
                <th class="text-left py-3 px-4 text-gray-600 dark:text-gray-400 font-medium">类型</th>
                <th class="text-left py-3 px-4 text-gray-600 dark:text-gray-400 font-medium">状态</th>
                <th class="text-left py-3 px-4 text-gray-600 dark:text-gray-400 font-medium">最后更新</th>
                <th class="text-left py-3 px-4 text-gray-600 dark:text-gray-400 font-medium">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr 
                v-for="platform in platforms"
                :key="platform.id"
                class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
              >
                <td class="py-3 px-4 text-gray-900 dark:text-white">{{ platform.name }}</td>
                <td class="py-3 px-4 text-gray-600 dark:text-gray-400">{{ platform.type }}</td>
                <td class="py-3 px-4">
                  <span 
                    class="px-2 py-1 rounded-full text-xs"
                    :class="getStatusClass(platform.status)"
                  >
                    {{ platform.status }}
                  </span>
                </td>
                <td class="py-3 px-4 text-gray-600 dark:text-gray-400">{{ platform.lastUpdated }}</td>
                <td class="py-3 px-4">
                  <div class="flex space-x-2">
                    <button 
                      @click="editPlatform(platform)"
                      class="text-tech-blue hover:text-tech-purple transition-colors"
                    >
                      <i class="fas fa-edit"></i>
                    </button>
                    <button 
                      @click="deletePlatform(platform.id)"
                      class="text-red-500 hover:text-red-700 transition-colors"
                    >
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 创建/编辑平台模态框 -->
    <CreatePlatformModal 
      v-if="showCreateModal"
      @close="showCreateModal = false"
      @save="handleSavePlatform"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import CreatePlatformModal from '@/components/test/CreatePlatformModal.vue'

interface Platform {
  id: string
  name: string
  type: string
  status: string
  lastUpdated: string
}

const showCreateModal = ref(false)

const platforms = reactive<Platform[]>([
  {
    id: '1',
    name: 'Web测试平台',
    type: 'Web',
    status: '运行中',
    lastUpdated: '2024-01-15 14:30'
  },
  {
    id: '2',
    name: '移动端测试平台',
    type: 'Mobile',
    status: '待机',
    lastUpdated: '2024-01-15 10:15'
  }
])

const getStatusClass = (status: string) => {
  switch (status) {
    case '运行中':
      return 'bg-green-100 text-green-800'
    case '待机':
      return 'bg-blue-100 text-blue-800'
    case '停止':
      return 'bg-red-100 text-red-800'
    default:
      return 'bg-gray-100 text-gray-800'
  }
}

const editPlatform = (platform: Platform) => {
  console.log('编辑平台:', platform)
  // 实现编辑逻辑
}

const deletePlatform = (id: string) => {
  if (confirm('确定要删除这个平台吗？')) {
    const index = platforms.findIndex(p => p.id === id)
    if (index !== -1) {
      platforms.splice(index, 1)
    }
  }
}

const handleSavePlatform = (platformData: Omit<Platform, 'id'>) => {
  const newPlatform: Platform = {
    ...platformData,
    id: Date.now().toString()
  }
  platforms.push(newPlatform)
  showCreateModal.value = false
}
</script>

